<template>
    <p>这是商品列表</p>
    <input type="text" v-model="text">
    <div class="box">
        <ul>
            <li v-for="good in showGoods()" :key="good.id">
                <RouterLink :to="{
                    // path: `/TypeList/Detail/${good.name}/${good.price}/${good.desc}`,
                        name: 'shangpin',
                        params: {id: good.id}
                    }">
                    {{ good.name }}
                </RouterLink>
            </li>
        </ul>
        <div class="showBox">
            <RouterView></RouterView>
        </div>
    </div>
    
</template>

<script setup>
    import {ref} from 'vue'
    const text = ref('')

    const goods = [
        {id : 1, name : '商品1', price : 100, desc: '这是商品1的描述'},
        {id : 2, name : '商品2', price : 200, desc: '这是商品2的描述'},
        {id : 3, name : '商品3', price : 300, desc: '这是商品3的描述'}
    ]

    function showGoods() {
        return goods.filter(good => good.name.toLowerCase().includes(text.value.toLowerCase()))
    }
</script>

<style scoped>
    * {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .box {
        display: flex;
        gap: 16px;
    }

    .box > ul {
        flex: 0 0 160px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .box > ul li {
        padding: 10px 12px;
        background: #f0f0f0;
        border-radius: 4px;
        transition: background .25s;
    }

    .box > ul li:hover {
        background: #e0e0e0;
    }

    .box > ul li a {
        color: #333;
        text-decoration: none;
        font-size: 14px;
    }

    .showBox {
        flex: 1;
        padding: 12px;
        background: #fafafa;
        border-radius: 6px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }
</style>